<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta 姓名="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配 移动设备 -->
    <title>渲染学生信息表</title>
    <style>
        /* 整个表格 */
        table {
            margin: 0 auto; /* 表格 版心居中 */
            width: 600px; /* 表格 宽度*/

            text-align: center; /* 文字 水平居中 */
        }

        /* 表格 设置框线*/
        table,
        th,
        td {
            border: 1px solid #ccc; /* 表格（作为盒子） 边框线 */
            border-collapse: collapse; /* 边框线折叠 */
        }

        /* 标题设置 */
        caption {
            font-size: 18px; /* 文字大小 */
            margin-bottom: 10px; /* 下外边距 */
            font-weight: 700; /* 文字加粗 */
        }

        /* 每一行 */
        tr {
            height: 40px; /* 设置表格行 高度 */
            cursor: pointer; /* 鼠标悬停 改变改变的形状 */
        }

        /* 表格的第一行 设置背景颜色 */
        table tr:nth-child(1) {
            background-color: #ddd;
        }

        /* :not(:nth-child(1)) 除了第一行，伪类选择器 的否定表达 */
        table tr:not(:nth-child(1)):hover { /* 鼠标悬停状态， 效果鼠标悬停行 变背景颜色 */
            background-color: #eee;
        }
    </style>
</head>
<body>
<!--这个是普通方法制作的表格，要求所以JS方法渲染表格-->
<!--
<h2>学生信息</h2>
<p>将数据渲染到页面中...</p>

<table>
    <caption>学生列表</caption>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>家乡</th>
    </tr>
    <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
    </tr>
    <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
    </tr>
    <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
    </tr>
    <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
    </tr>
    <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
    </tr>
    <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
    </tr>
</table>
-->

<!--
渲染学生信息表 (即JS 制作表格)
分析：
1. 打印表格 头部和尾部
2. 中间的行遍历数组，然后填充对象数据
-->
<h1>学生信息</h1>
<p>将数据渲染到页面中...</p>
<table>
    <caption></caption> <!-- 标题标签 -->
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>家乡</th>
    </tr>

    <script>
        // 这里我们把 script里的JS代码写在, table表格标签里
        // 1. 数据准备， 声明 数组, 元素是对象
        let 数组_学生信息 = [
            {姓名: '小明', 年龄: 18, 性别: '男', 所在地: '河北省'},
            {姓名: '小红', 年龄: 19, 性别: '女', 所在地: '河南省'},
            {姓名: '小刚', 年龄: 17, 性别: '男', 所在地: '山西省'},
            {姓名: '小丽', 年龄: 18, 性别: '女', 所在地: '山东省'},
            {姓名: '晓强', 年龄: 16, 性别: '女', 所在地: '蓝翔技校'},
            {姓名: '雨燕', 年龄: 16, 性别: '女', 所在地: '北京市'},
        ]
        // 2. 渲染页面， 循环数组读取信息， 打印表格
        let 序号 = 0
        for (let 元素 of 数组_学生信息) {
            序号++
            document.write(`
                <tr>
                    <th>${序号}</th>
                    <th>${元素.姓名}</th>
                    <th>${元素.年龄}</th>
                    <th>${元素.性别}</th>
                    <th>${元素.所在地}</th>
                </tr>
            `)
        }
    </script>

</table>

<!--这个是我把代码这个写在 script 里的方法，和课程的JS代码，嵌套 table(表格标签)里不太一样，但是效果相同-->
<script src="渲染学生信息表_我的方法.js"></script>

</body>
</html>